<template>
	<view>
		<view class="top">
			<image class="background" style="width: 100%;" mode="aspectFill" @tap="showActionSheetBg(loginUserInfo.background)" :src="loginUserInfo.background"></image>
			<image class="avatar" @tap="showActionSheet(loginUserInfo.avatar)" :src="loginUserInfo.avatar"></image>
			<view class="btn" @tap="gotoPage(2)">编辑信息</view>
		</view>
		<view class="middle">
			<view class="name-container">
				<text selectable="true" class="name">{{loginUserInfo.nickname}}</text>
				<image class="icon" :src="loginUserInfo.gender===1?'../../static/icon/gender-male.png':'../../static/icon/gender-female.png'"></image>
			</view>
			<view class="mail-container">
				<image class="icon" src="../../static/icon/mail.png"></image>
				<text selectable="true">{{loginUserInfo.email}}</text>
				<image class="icon" src="../../static/icon/calendar.png"></image>
				<text>{{loginUserInfo.birthday.substring(0,11)}}</text>
			</view>
			<view class="text">
				个人简介：
				<text selectable="true">{{loginUserInfo.introduction}}</text>
			</view>
			<view class="text">
				注册时间：
				<text selectable="true">{{loginUserInfo.createTime}}</text>
			</view>
		</view>

		<view class="bottom">
			<view class="btn" @tap="gotoPage(0)">给作者star</view>
			<view class="btn" @tap="gotoPage(1)">进空间</view>
		</view>
		
		
	</view>
</template>

<script>
	import userRequest from '@/api/user.js';
	import requestUrl from '@/api/url.js';
	import {mapGetters} from 'vuex';
	import timeUtil from '@/util/timeUtil.js';
	import $store from '@/store/index.js';
	export default{
		computed:{
			...mapGetters(['loginUserInfo'])
		},
		data(){
			return{
				show : false,
				popupData: {
					overlay: true,
					mode: 'center',
					borderRadius: '',
					closeable: true,
					closeOnClickOverlay: true
				},
				message: '',
				notation: '',
				avatarType: 0,
			}
		},
		methods:{
			async updateAvater(data){
				let param;
				if(this.avatarType===0){
					param = {
						id: this.loginUserInfo.id,
						avatar: requestUrl.getUrl()+data.data.compressUrl,
					}
				}else{
					param = {
						id: this.loginUserInfo.id,
						background: requestUrl.getUrl()+data.data.url,
					}
				}
				let res = await userRequest.update(param)
				uni.showToast({
					icon:'none',
					title:'上传成功！'
				})
				$store.state.loginUserInfo = res.data;
				uni.setStorageSync('LOGIN_USER_INFO', res.data);
				//console.log($store.state.loginUserInfo)
			},
			chooseYourAvatar(){
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: function (res) {
						//console.log(res.tempFilePaths[0])
						if(3*1048576 < res.tempFiles[0].size){
							uni.showToast({
								icon:'none',
								title:'图片请限制在'+3+'MB以内'
							})
						}else{
							uni.uploadFile({
								url: that.avatarType===0?requestUrl.getUrl()+'ddchat/image/uploadAvatar':requestUrl.getUrl()+'ddchat/image/upload', // 仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'image',
								formData: {
									userId: that.loginUserInfo.id
								},
								success: (res) => {
									let data = JSON.parse(res.data)
									if(!data.success) uni.showToast({
										title:'图片上传失败！',
										icon:'none'
									})
									else{
										that.updateAvater(data)
									}
								}
							});
						}
					}
				});
			},
			getFormatTime(time){
				return timeUtil.getFormatTime(time);
			},
			showActionSheet(url){
				let that = this;
				uni.showActionSheet({
					itemList: ['查看大图', '上传头像'],
					success: function (res) {
						//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex===0){
							that.preViewImage(url)
						}else if(res.tapIndex===1){
							that.avatarType = 0;
							that.chooseYourAvatar();
						}
					},
					fail: function (res) {
						//console.log(res.errMsg);
					}
				});
			},
			showActionSheetBg(url){
				let that = this;
				uni.showActionSheet({
					itemList: ['查看大图', '上传背景墙'],
					success: function (res) {
						//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex===0){
							that.preViewImage(url)
						}else if(res.tapIndex===1){
							that.avatarType = 1;
							that.chooseYourAvatar();
						}
					},
					fail: function (res) {
						//console.log(res.errMsg);
					}
				});
			},
			gotoPage(i){
				switch(i){
					case 0:
					//#ifdef H5
					window.open('https://gitee.com/derekerrr/ddchat')
					// #endif
					//#ifdef APP-PLUS
					plus.runtime.openURL('https://gitee.com/derekerrr/ddchat')
					//#endif
					break;
					case 1:
					uni.showToast({
						icon:'none',
						title:'暂未开放'
					})
					break;
					case 2:
					uni.navigateTo({
						url:'/pages/info/person-edit'
					})
					break;
				}
			},
			change(e){
				//console.log(this.message)
			},
			openMethod(){
				//console.log('打开了')
			},
			preViewImage(url){
				uni.previewImage({
					urls:[url]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		//background-color: #e2e2e2;
	}
	.top{
		position: relative;
		height: 500rpx;
		.background{
			// z-index: -1;
			height: 400rpx;
		}
		.avatar{
			border-radius: 50%;
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			bottom: 0;
			left: 50rpx;
		}
		.btn{
			position: absolute;
			bottom: 15rpx;
			right: 50rpx;
			background-color: $theme-green-deep;
			padding: 15rpx;
			color: white;
			border-radius: 8rpx;
			font-weight: 600;
		}
		.btn:active{
			background-color: $theme-green-deep;
		}
	}
	
	.middle{
		padding: 50rpx;
		.name-container{
			display: flex;
			.name{
				font-weight: 900;
				font-size: 35rpx;
			}
			.icon{
				margin-left: 5rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.mail-container{
			margin-top: 20rpx;
			display: flex;
			.icon{
				margin-left: 5rpx;
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
			text{
				font-weight: 500;
				font-size: 25rpx;
				margin-right: 30rpx;
			}
		}
		.text{
			margin-top: 30rpx;
			color: $font-color-grey;
			letter-spacing: 1rpx;
			// font-size: 35rpx;
		}
	}
	.bottom{
		position: absolute;
		padding: 50rpx;
		display: flex;
		width: 100%;
		bottom: 0;
		.btn{
			background-color: $theme-green-deep;
			width: 40%;
			height: 70rpx;
			color: #fff;
			font-weight: 900;
			text-align: center;
			line-height: 70rpx;
			margin-right: 7%;
			border-radius: 35rpx;
		}
	}
	.u-popup-slot {
		padding: 50rpx;
		width: 200px;
		height: 150px;
		@include flex;
		justify-content: center;
		align-items: center;
		display: block;
	}
</style>